<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="generator" content="">
    <title>UNIS Design System v4</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="../styles/global.css">
    <link rel="stylesheet" href="css/unis.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../js/nav.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid" id="app">
    <div class="row bg-pearl-blue" style="padding-top: 15px;">
        <div class="col-8">
            <h2 class="primary">01. Grid System & Spacing</h2>
            <p style="padding-left: 46px;">Layout Depends On Bootstrap4.css <a href="https://getbootstrap.com/" target="_blank">GetBootstrap.com</a>
            </p>
        </div>
        <div class="col-4" style="text-align: right; padding-top: 30px;">
            <a class="btn btn-primary" href="./css/bootstrap.css" download="bootstrap.css">download (Bootstrap4.css)</a>
        </div>
    </div>
    <div class="d-flex flex-row">
        <div class="col isolation">

            <span style="font-size: 40px">Flex</span>
            <p>Apply the display tool to  create a  <span class="badge  badge-primary">&lt;class="d-flex"> </span>container, and the project can be further modified with additional properties.</p>
            <hr>
            <div v-for="(flex, index) in Flexs" :id="'Flex'+index">
                <span style="font-size: 30px" v-html="flex.name"></span>
                <p v-html="flex.title"></p>
                <div class="btn-code" v-for="list in flex.lists">
                    <div class="code-label blue" >
                        <div class="unis-arrow left "></div>
                        <div class="unis-arrow right "></div>
                    </div>
                    <input type="checkbox" class="code-input" >
                    <div class="card">
                        <div class="card-header">Example</div>
                        <div class="card-body card-body-flex">
                            <h3 v-html="list.name" v-if="list.name"></h3>
                            <p v-html="list.tltle" v-if="list.tltle"></p>
                            <div v-html="list.html" class="htmls" v-if="!list.isHtml"
                                 style="padding: 15px 0 ;border: 1px solid #ececec" :style="{'height':list.height}">

                            </div>
                            <div v-for=" li in list.enable" v-if="list.enable" class="htmls"
                                 style="padding: 15px 0 ;border: 1px solid #ececec">
                                <div v-html="li.html"></div>

                            </div>
                            <div class="row xmp">
                                <pre class="mxScroll" style="width: 100%;">
                                    <code class="lang-javascript html code" v-html="list.html"  style="padding-left: 15px!important;">
                                    </code>
                                   </pre>

                            </div>
                        </div>
                    </div>
                    <ul v-if="list.replenish">
                        <li v-for="re in list.replenish">{{re}}</li>
                    </ul>
                </div>
                <hr>
            </div>


            <div style="height: 100px;"></div>
        </div>
        <div class="col leftnavHeight">
            <div id="navHeight" class="nav">
                <nav class="nav-wrap navFix leftNavFix" id="nav-wrap">
                    <div class="nav-Buttons" style="cursor: pointer"><i class="unis-tian unis-icon"
                                                                        style="margin-right: 15px; "></i>Buttons
                    </div>
                    <ul class="clearfix">
                        <li v-for="(alink,index) in Flexs"><a class="" :href="'#Flex'+index">{{alink.name}}</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

<script src="../js/beautify2.js" type="text/javascript"></script>
<script src="../js/beautify-css2.js" type="text/javascript"></script>
<script src="../js/beautify-html2.js" type="text/javascript"></script>
<script src="../js/highlight.min.js"></script>
<script type="text/javascript">
    Vue.config, 'debug = true';
    app = new Vue({
        el: "#app",
        data: {
            Flexs: [
                {
                    name: '',
                    title: '',
                    lists: [{
                        name: '',
                        tltle: '',
                        html: '<div class="d-flex  p-2">M A Flexbox Container!</div>',
                        replenish: ['d-flex', 'd-inline-flex', 'd-sm-flex', 'd-sm-inline-flex', 'd-md-flex', 'd-md-inline-flex'
                            , 'd-lg-flex', 'd-lg-inline-flex', 'd-xl-flex', 'd-xl-inline-flex']
                    }]
                },
                {
                    name: 'Enable Col Behaviors',
                    title: 'Responsive variations also exist for ,"col and", "col-1 ~ col-12".',
                    lists: [{
                        name: 'col',
                        tltle: '',
                        html: '<div class="d-flex">' +
                        '<div class="col bo-l-r">col</div>' +
                        '<div class="col bo-l-r">col</div>' +
                        '<div class="col bo-l-r">col</div>' +
                        '<div class="col bo-l-r">col</div>' +
                        '<div class="col bo-l-r">col</div>' +
                        '<div class="col bo-l-r">col</div>' +
                        '<div class="col bo-l-r">col</div>' +
                        '<div class="col bo-l-r">col</div>' +
                        '<div class="col bo-l-r">col</div>' +
                        '<div class="col bo-l-r">col</div>' +
                        '<div class="col bo-l-r">col</div>' +
                        '<div class="col bo-l-r">col</div>' +
                        '</div>',
                        enable: [{
                            html: '<div class="d-flex">' +
                            '<div class="col bo-l-r">col</div>' +
                            '<div class="col bo-l-r">col</div>' +
                            '</div>'
                        }]
                    },
                        {
                            name: 'col-1 ~ col-12',
                            tltle: '',
                            height: '400px',
                            isHtml: true,
                            html: '<div class="d-flex flex-wrap">' +
                            '<div class="col-1 bo-l-r-b">col-1</div>' +
                            '<div class="col-2 bo-l-r-b">col-2</div>' +
                            '<div class="col-3 bo-l-r-b">col-3</div>' +
                            '<div class="col-4 bo-l-r-b">col-4</div>' +
                            '<div class="col-5 bo-l-r-b">col-5</div>' +
                            '<div class="col-6 bo-l-r-b">col-6</div>' +
                            '<div class="col-7 bo-l-r-b">col-7</div>' +
                            '<div class="col-8 bo-l-r-b">col-8</div>' +
                            '<div class="col-9 bo-l-r-b">col-9</div>' +
                            '<div class="col-10 bo-l-r-b">col-10</div>' +
                            '<div class="col-11 bo-l-r-b">col-11</div>' +
                            '<div class="col-12 bo-l-r-b">col-12</div>' +
                            '</div>',
                            enable: [
                                {
                                    html: '<div class="d-flex flex-wrap">' +
                                    '<div class="col-12 bo-l-r-b">col-12</div>' +
                                    '</div>'
                                },
                                {
                                    html: '<div class="d-flex flex-wrap">' +
                                    '<div class="col-1 bo-l-r-b">col-1</div>' +
                                    '<div class="col-11 bo-l-r-b">col-11</div>' +
                                    '</div>'
                                },
                                {
                                    html: '<div class="d-flex flex-wrap">' +
                                    '<div class="col-2 bo-l-r-b">col-2</div>' +
                                    '<div class="col-10 bo-l-r-b">col-10</div>' +
                                    '</div>'
                                },
                                {
                                    html: '<div class="d-flex flex-wrap">' +
                                    '<div class="col-3 bo-l-r-b">col-3</div>' +
                                    '<div class="col-9 bo-l-r-b">col-9</div>' +
                                    '</div>'
                                },
                                {
                                    html: '<div class="d-flex flex-wrap">' +
                                    '<div class="col-4 bo-l-r-b">col-4</div>' +
                                    '<div class="col-8 bo-l-r-b">col-8</div>' +
                                    '</div>'
                                },
                                {
                                    html: '<div class="d-flex flex-wrap">' +
                                    '<div class="col-5 bo-l-r-b">col-5</div>' +
                                    '<div class="col-7 bo-l-r-b">col-7</div>' +
                                    '</div>'
                                },
                                {
                                    html: '<div class="d-flex flex-wrap">' +
                                    '<div class="col-6 bo-l-r-b">col-6</div>' +
                                    '<div class="col-6 bo-l-r-b">col-6</div>' +
                                    '</div>'
                                },
                                {
                                    html: '<div class="d-flex flex-wrap">' +
                                    '<div class="col-1 bo-l-r-b">col-1</div>' +
                                    '<div class="col bo-l-r-b">( col ) Automatic replenishment of the rest</div>' +
                                    '</div>'
                                }]
                        }
                    ]


                },

                {
                    name: 'Direction',
                    title: 'Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.',
                    lists: [{
                        name: '',
                        tltle: '',
                        html: '<div class="d-flex flex-column bd-highlight mb-3" >' +
                        '<div class="p-2 bd-highlight">Flex item 1</div>' +
                        '<div class="p-2 bd-highlight">Flex item 2</div>' +
                        '</div>'
                    },{
                        name: '',
                        tltle: '',
                        html: '<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">' +
                        '<div class="mb-auto p-2 bd-highlight">Flex item</div>' +
                        '<div class="p-2 bd-highlight">Flex item</div>' +
                        '<div class="p-2 bd-highlight">Flex item</div>' +
                        '</div>',
                    }, {
                        name: '',
                        tltle: '',
                        html: '<div class="d-flex flex-row">' +
                        '<div class="p-2 bo-all ">Flex item 1</div>' +
                        '<div class="p-2 bo-all">Flex item 2</div>' +
                        '<div class="p-2 bo-all">Flex item 3</div>' +
                        '</div>',
                    }, {
                        name: '',
                        tltle: '',
                        html: '<div class="d-flex flex-row-reverse">' +
                        '<div class="p-2 bo-all">Flex item 1</div>' +
                        '<div class="p-2 bo-all">Flex item 2</div>' +
                        '<div class="p-2 bo-all">Flex item 3</div>' +
                        '</div>',
                    }]


                },
                {
                    name: 'Auto Margins',
                    title: 'Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (.mr-auto), and pushing two items to the left (.ml-auto).',
                    lists: [
                        {
                            name: '',
                            tltle: '',
                            html: '<div class="d-flex">' +
                            ' <div class="p-2 bo-all">Flex item</div>' +
                            ' <div class="p-2 bo-all">Flex item</div>' +
                            '<div class="p-2 bo-all">Flex item</div>' +
                            '</div>',

                        }, {
                            name: '',
                            tltle: 'Margin Left',
                            html: '<div class="d-flex" >' +
                            ' <div class="mr-auto p-2 bo-all">Flex item</div>' +
                            ' <div class="p-2 bo-all">Flex item</div>' +
                            '<div class="p-2 bo-all">Flex item</div>' +
                            '</div>',

                        }, {
                            name: '',
                            tltle: 'Margin Right',
                            html: '<div class="d-flex" >' +
                            ' <div class="p-2 bo-all">Flex item</div>' +
                            ' <div class="p-2 bo-all">Flex item</div>' +
                            '<div class="ml-auto p-2 bo-all">Flex item</div>' +
                            '</div>',

                        }, {
                            name: 'Align Stretch',
                            tltle: 'Define height auto or not define height',
                            html: '<div class="d-flex" style="height: 88px;" >' +
                            ' <div class="col-2 bo-all align-self-stretch" style="height: auto">Flex item</div>' +
                            ' <div class="col-2 bo-all align-self-stretch" style="height: auto">Flex item</div>' +
                            '<div class="ml-auto col-2 bo-all align-self-center" >Flex item</div>' +
                            '</div>',

                        }, {
                            name: 'Align Self',
                            tltle: '',
                            html: '<div class="d-flex" style="height: 88px;" >' +
                            ' <div class="align-self-start col-2 bo-all">Aligned flex item</div>' +
                            ' <div class="align-self-end col-2 bo-all">Aligned flex item</div>' +
                            ' <div class="align-self-center col-2 bo-all">Aligned flex item</div>' +
                            '  <div class="align-self-baseline col-2 bo-all">Aligned flex item</div>' +
                            ' <div class="align-self-stretch ml-auto col-2 bo-all">Aligned flex item</div>' +
                            '</div>'

                        }, {
                            name: 'Justify Content',
                            tltle: '',
                            html: '<div class="d-flex justify-content-start">' +
                            ' <div class="align-self-start col-2 bo-all">Aligned flex item</div>' +
                            ' <div class="align-self-end col-2 bo-all">Aligned flex item</div>' +
                            ' <div class="align-self-center col-2 bo-all">Aligned flex item</div>' +
                            '  <div class="align-self-baseline col-2 bo-all">Aligned flex item</div>' +
                            '</div>'

                        }, {
                            name: '',
                            tltle: 'End',
                            html: '<div class="d-flex justify-content-end">' +
                            ' <div class="align-self-start col-2 bo-all">Aligned flex item</div>' +
                            ' <div class="align-self-end col-2 bo-all">Aligned flex item</div>' +
                            ' <div class="align-self-center col-2 bo-all">Aligned flex item</div>' +
                            '  <div class="align-self-baseline col-2 bo-all">Aligned flex item</div>' +
                            '</div>'

                        }, {
                            name: '',
                            tltle: 'Center',
                            html: '<div class="d-flex justify-content-center">' +
                            ' <div class="align-self-start col-2 bo-all">Aligned flex item</div>' +
                            ' <div class="align-self-end col-2 bo-all">Aligned flex item</div>' +
                            ' <div class="align-self-center col-2 bo-all">Aligned flex item</div>' +
                            '  <div class="align-self-baseline col-2 bo-all">Aligned flex item</div>' +
                            '</div>'

                        }, {
                            name: '',
                            tltle: 'Between',
                            html: '<div class="d-flex justify-content-between">' +
                            ' <div class="align-self-start col-2 bo-all">Aligned flex item</div>' +
                            ' <div class="align-self-end col-2 bo-all">Aligned flex item</div>' +
                            ' <div class="align-self-center col-2 bo-all">Aligned flex item</div>' +
                            '  <div class="align-self-baseline col-2 bo-all">Aligned flex item</div>' +
                            '</div>'

                        }, {
                            name: '',
                            tltle: 'Around',
                            html: '<div class="d-flex justify-content-around">' +
                            ' <div class="align-self-start col-2 bo-all">Aligned flex item</div>' +
                            ' <div class="align-self-end col-2 bo-all">Aligned flex item</div>' +
                            ' <div class="align-self-center col-2 bo-all">Aligned flex item</div>' +
                            '  <div class="align-self-baseline col-2 bo-all">Aligned flex item</div>' +
                            '</div>'

                        }, {
                            name: '',
                            tltle: 'Wrap',
                            html: '<div class="d-flex flex-wrap" style="height: 80px">' +
                            ' <div class="col-4 col-2 bo-all">Aligned flex item</div>' +
                            ' <div class="col-4 col-2 bo-all">Aligned flex item</div>' +
                            ' <div class="col-4 col-2 bo-all">Aligned flex item</div>' +
                            ' <div class="col-4 col-2 bo-all">Aligned flex item</div>' +
                            ' <div class="col-4 col-2 bo-all">Aligned flex item</div>' +
                            '</div>'

                        }
                    ]


                },
            ]

        }
    });
</script>
<script>
    $(document).ready(function () {
        var navHeight = $("#navHeight").offset().top;
        var navFix = $("#nav-wrap");
        $(window).scroll(function () {
            if ($(this).scrollTop() > navHeight) {
                navFix.addClass("navAside");
            }
            else {
                navFix.removeClass("navAside");
            }
        })
    });
    $('.nav-wrap').navScroll({
        mobileDropdown: false,
        mobileBreakpoint: 0,
        scrollSpy: true
    });
</script>

<script>
    var opts = {
        'indent_size': 4,
        'indent_char': ' ',
        'max_char': 300,
        'brace_style': 'expand',
    }
    var source = document.getElementsByClassName('code');
    for (var i = 0; i < source.length; i++) {
        source[i].innerHTML = style_html(source[i].innerHTML, opts).replace(/</g, "&lt;");
    }

</script>
<script>
    hljs.initHighlightingOnLoad();
</script>
</body>
</html>